<template>
  <div class="h-menu">
    <el-button style="font-size: 14px" v-if="!$store.state.setting.noShowHorizontalMenu" :key="info.title" v-for="info of content" :type="activeMenu.title===info.title?'success':'default'" size="mini" @click="handleSelect(info)">{{ info.title }}</el-button>
    <!--    <l-menu-->
    <!--      :default-active="activeIndex"-->
    <!--      mode="horizontal"-->
    <!--      @select="handleSelect"-->
    <!--      v-bind="$attrs"-->
    <!--      v-on="$listeners">-->
    <!--      <template v-for="menu of content">-->
    <!--        <l-menu-item v-if="!menu.children||!menu.children.length" :index="menu.index"><span class="item-text">{{menu.title}}</span></l-menu-item>-->
    <!--        <l-submenu v-else :index="menu.index">-->
    <!--          <template slot="title"><span class="item-text">{{menu.title}}</span></template>-->
    <!--          <template v-for="menu1 of menu.children">-->
    <!--            <l-menu-item v-if="!menu1.children||!menu1.children.length" :index="menu1.index"><span class="item-text-sub">{{menu1.title}}</span></l-menu-item>-->
    <!--            <l-submenu v-else :index="menu1.index">-->
    <!--              <template slot="title"><span class="item-text">{{menu1.title}}</span></template>-->
    <!--              <template v-for="menu2 of menu1.children">-->
    <!--                <l-menu-item v-if="!menu2.children||!menu2.children.length" :index="menu2.index"><span class="item-text-sub">{{menu2.title}}</span></l-menu-item>-->
    <!--                <l-submenu v-else :index="menu2.index">-->
    <!--                  <template slot="title"><span class="item-text">{{menu2.title}}</span></template>-->
    <!--                  <template v-for="menu3 of menu2.children">-->
    <!--                    <l-menu-item v-if="!menu3.children||!menu3.children.length" :index="menu3.index"><span class="item-text-sub">{{menu3.title}}</span></l-menu-item>-->
    <!--                    <l-submenu v-else :index="menu3.index">-->
    <!--                      <template slot="title"><span class="item-text">{{menu3.title}}</span></template>-->
    <!--                      <template v-for="menu4 of menu3.children">-->
    <!--                        <l-menu-item :index="menu4.index"><span class="item-text-sub">{{menu4.title}}</span></l-menu-item>-->
    <!--                      </template>-->
    <!--                    </l-submenu>-->
    <!--                  </template>-->
    <!--                </l-submenu>-->
    <!--              </template>-->
    <!--            </l-submenu>-->
    <!--          </template>-->
    <!--        </l-submenu>-->
    <!--      </template>-->
    <!--    </l-menu>-->
  </div>
</template>

<script>

export default {
  name: "hMenu",
  props: {
    content: {
      type: Array,
      default: _ => []
    }
  },
  data() {
    return {
      activeMenu:'',
    }
  },
  methods:{
    handleSelect(info){
      this.activeMenu = info
      this.$emit('doSelect',info)
    },
  },
  created() {
    let first
    this.content.forEach(item=>{
      if(item.home){
        first = item
        this.$emit('setFirstPage',item)
      }
    })
    this.activeMenu = first || this.content[0]
  }
}
</script>

<style scoped lang="scss">
.item-text {
  font-size: 18px;
}

.item-text-sub {
  font-size: 12px;
}

</style>
